<template>
	<view>
		<u-navbar :is-back="true" title="客户评价"></u-navbar>
		<view class="content">
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" bg-color="transparent"></u-tabs-swiper>
				<view class="searchBox">
					<view class="search-wrapper"><u-search placeholder="请输入订单编号/服务名称" shape="square" :show-action="false" @search="search" @custom="search" height="70" bg-color="#fff" v-model="listQuery.param"></u-search></view>
				</view>
				<view class="list">
					<u-empty v-if="!evaluateList.length" mode="list"></u-empty>
					<view class="formBox" v-for="(item,index) in evaluateList" :key="item.id" @tap="openEvaluateDetails(item.id)">
            <view class="label"><span class="Title">订单编号：</span><span>{{ item.bizId }}</span></view>
            <view class="label"><span class="Title">服务名称：</span><span>{{ item.goodsServerName }}</span></view>
            <view v-if="current==1" class="label"><span class="Title">使用方式：</span><span>{{ item.useTypeStr }}</span>
            </view>
            <view class="label"><span class="Title">评分：</span><span class="score">{{ item.score }}</span></view>
            <view class="label">
              <span class="Title">评分时间：{{ item.commentsTime }}</span>
              <span class="btn" @tap.stop="getStatus(item.id,item.statusStr)">{{ item.statusStr }}</span></view>
          </view>
					<u-loadmore v-if="!listQuery.noData && evaluateList.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }"     />
					<u-loadmore v-if="listQuery.noData && evaluateList.length != 0" :status="'loading '" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {scoreList, updateScoreStatus} from '@/api/my.js'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      list: [
        {
          name: '洗车订单',
          value: 1
        },
        {
          name: '商城订单',
          value: 2
					}
				],
				current:0,
				evaluateList:[],
				listQuery:{
					param:"",
					pageNo:1,
					pageSize:20,
					bizType:1,
					noData:true
				}
				
			};
		},
		computed:{
			...mapGetters(["userInfo"]),
		},
		
		onLoad() {
			this.init()
		},
		onReachBottom() {
			if (this.listQuery.noData) {
				this.init();
			}
		},
		onPullDownRefresh() {
			this.listQuery.pageNo = 1;
			this.listQuery.noData = true;
			this.init();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			init(){
				this.getlist();
			},
			search(value){
				this.listQuery.noData = true;
				this.listQuery.pageNo = 1;
				this.evaluateList=[];
				this.getlist();
			},
			openEvaluateDetails(id){
				this.$navigateTo('/pages/my/evaluateDetail',{id,bizType:this.list[this.current].value})
			},
			tabsChange(index) {
				console.log(index, this.current);
				if (this.current != index) {
					this.current = index;
					this.listQuery.noData = true;
					this.listQuery.pageNo = 1;
					this.evaluateList=[];
					this.getlist();
				}
			},
			getlist(){
				this.listQuery.storeBasicId=this.userInfo.storeBasicId
				this.listQuery.bizType=this.list[this.current].value
				scoreList(this.listQuery).then(res=>{
					console.log(this.listQuery)
					if (this.listQuery.pageNo == 1) {
						this.evaluateList = res.data;
					} else {
						this.evaluateList = this.evaluateList.concat(res.data);
					}
					this.listQuery.pageNo += 1;
					if (this.listQuery.pageSize != res.data.length) {
						this.listQuery.noData = false;
					}
				})
			},
			getStatus(id,status){
				var curStatus=status=="展示"?1:2;
				var statusParam= {
					scoreId:id,
					status:curStatus
				}
				console.log(statusParam);
				updateScoreStatus(statusParam).then(res=>{
					if(res.code==1){
						this.listQuery.pageNo=1;
						this.getlist();
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding-top: 20rpx;
		.searchBox{
			width: 680rpx;
			margin:20rpx auto;
		}
		.formBox {
			width: 660rpx;
			padding:15rpx 24rpx;
			margin-top: 0;
			margin-bottom: 20rpx;
			.title{
				font-size: 28rpx;
				color: #333;
				line-height: 65rpx;
				border-bottom: none;
			}
			.title:before{
				position: relative;
				top:4rpx;
				content: "";
				display: inline-block;
				width: 8rpx;
				height: 25rpx;
				background: #177fff;
				border-radius: 4px;
				margin-right: 10rpx;
			}
			.subtitle{
				line-height: 60rpx;
				font-size: 32rpx;
				color: #777;
			}
			.label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 28rpx 0;
        font-size: 28rpx;
        color: #666666;
        border-bottom: 1px solid #ededed;

        span:last-child {
          color: #131313;
        }

        span.score {
          color: #ff6738;
        }

        .Title {
          min-width: 155rpx;

        }

        span.btn {
          color: #177fff;
        }
      }
			.label:last-child{
				border-bottom: none;
			}
			.search-wrapper {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}
	

</style>
